{% extends 'base_chatbot.html' %}

{% block func_script %}
<!--jquery请求头-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<script>

    //按钮‘清除内容’
    $(document).on("click",'#who',function()
    {
        // alert('点击了清除消息')
        var Words = document.getElementById("words");
        Words.innerHTML='';
    }),

    //按钮‘接收消息’
    $(document).on("click",'#who2',function()
    {
        //alert('点击了接收消息')
        var Words = document.getElementById("words");
        $.ajax
        ({
            type:"post",
            url: "{% url 'manbot_rep_get' %}",
            data: {
                'msg': '我要接收消息'
            },
            async : false,
            dataType:'json',
            timeout:100,

            //如果返回成功 输出后端传递到前端的话
            success:function(res)
            {
                if (res['msg']==0)
                {
                    alert('没有新的消息');
                }
                else
                {
                    str = '<div class="btalk"><span>' + res['msg'] +'</span></div>';//自动回复的内容
                    Words.innerHTML = Words.innerHTML + str;
                }
            },
        })
    }),

    //按钮‘发送’
    $(document).on("click",'#talksub2',function()
    {
        var Words = document.getElementById("words");        // 在网页上添加
        var TalkWords = document.getElementById("talkwords2");// 客户输入的话 TalkWords.value是一个string

        //显示顾客输入的内容
        if(TalkWords.value == "")
        {
	        // 消息为空时弹窗
            alert("消息不能为空");
            return;
        }
        else
        {
            str = '<div class="atalk"><span>' + TalkWords.value +'</span></div>';//自动回复的内容
            Words.innerHTML = Words.innerHTML + str;
            //alert(res['msg']);
        }

        // ajax 将前端TalkWords.value传递到后端
        $.ajax
        ({
            type:"post",
            url: "{% url 'manbot_rep_send' %}",
            data: {
                'msg': TalkWords.value
            },
            async : false,
            dataType:'json',
            timeout:100,

            //如果返回成功 输出后端传递到前端的话
            success:function(res)
            {
                // str = '<div class="atalk"><span>' + res['msg'] +'</span></div>';//自动回复的内容
                // Words.innerHTML = Words.innerHTML + str;
                // TalkWords.value='';
                // //alert(res['msg']);
                TalkWords.value=''
                //alert('发送成功');
            },
        })
    })
</script>

{% endblock func_script %}


{% block room %}

<div class="col-lg-3-new d-none d-lg-block">
    <a class="btn shadow-none d-flex align-items-center bg-primary text-white w-100 text-type" data-toggle="collapse"  style="height: 65px; margin-top: -1px; padding: 0 30px;">
        <h6 class="m-0 text-type"><strong>人工客服后台</strong></h6>
    </a>

    <div class="talk_con">

        <!--这里是显示的对话内容-->
        <div class="talk_show" id="words">
            
        </div>


        <div class="talk_input">
            <button type="button" class="whotalk" id="who">
                清除内容
            </button>

            <button type="button" class="whotalk" id="who2">
                接收消息
            </button>

            <!--下面两项数据将被来回传递-->

            <!--顾客输入的内容-->
            <input type="text" class="talk_word" id="talkwords2" name="msg_customer">
                
            <!--‘发送’这个按钮-->
            <!--<input type="button" value="发送" class="talk_sub">-->
            <button type="button" class="talk_sub" id="talksub2">
                发送
            </button>

        </div>
    </div>


</div>


{% endblock room %}